<template>
	<div class="integral">
		<teaheader></teaheader>
		<div class="tea_integral">
			<div class="integral_tit">获取积分详情</div>
			<template v-if="item">
				<div v-for="(item,index) in items">
					<ul>
						<li class="integral_time">{{item.date}}</li>
						<li class="integral_delited">
							<p><span class="delited_name">{{item.inteType}}</span><span class="delited_much">{{item.inteValue}}</span></p>
						</li>
						<li class="integral_sum">共获得<span>8</span>积分</li>
					</ul>
					<div class="list_center" @click="play(index)"></div>
				</div>
			</template>
			<!--<template v-else>
				<div class="nomsg">暂无排名信息</div>
			</template>-->
		</div>
		<div class="fenye">
			<ul class="pagelist" maxshowpageitem="5" pagelistcount="10" id="pagelist"></ul>
		</div>
		<teafooter></teafooter>
	</div>
</template>

<script type="text/ecmascript-6">
	export default{
		data(){
			return {
				items: [],
				intTeaId:this.$store.state.tea_id,
				pageindex: 1, //当前显示第几页
				size: 10, //每页显示数量
				sumlist: '',//列表总数
			}
		},
		created() {
			this.$http.get(domain + '/API/SummerAct/GetInteDetail', {
				params: {
					'intcityID':this.$store.state.city_id,
					'intTeaId': this.intTeaId,
					'pageindex': this.pageindex,
					'size': this.size
				}
			}).then(res => {
				let dt = res.body.inReConunt;
				let sum = res.body.date;
				this.items = sum;
				this.sumlist = dt;
				console.log(this.items);
				$("#pagelist").initPage(this.sumlist, 1, this.rpage);
			});
		},
		mounted() {
		
		},
		methods: {
			rpage() {
				let that = this;
				let cur_page = arguments[0];
				console.log(cur_page);
				this.$http.get(domain + '/API/SummerAct/GetInteDetail', {
					params: {
						'intTeaId': this.intTeaId,
						'pageindex': cur_page,
						'size': this.size
					}
				}).then(res => {
					let dt = res.body.sortList;
					
				});
			}
			
			
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../../assets/scss/_mixin";
.integral{
	background-color: #fff7b3;
	padding-bottom: 150px/$ppr;
}
.tea_integral{
	background-color: #FFFFFF;
	width: 660px/$ppr;
	height: 786px/$ppr;
	border: 1px solid #333333;
	border-radius: 20px/$ppr;
	margin: 0 auto;
	.integral_tit{
		width: 100%;
		height: 92px/$ppr;
		background-color: #fdfbec;
		border-radius:20px/$ppr 20px/$ppr 0 0;
		line-height: 92px/$ppr;
		text-align: center;
	}
	ul{
		width: 660px/$ppr;
		li{
			height: 230px/$ppr;
			color: #333333;
			text-align: center;
		}
		.integral_time{
			width: 120px/$ppr;
			float: left;
			font-size: 24px/$ppr;
			line-height: 230px/$ppr;
			border-bottom: 1px dashed #fefad4;
		}
		.integral_delited{
			box-sizing: border-box;
			padding-top: 20px/$ppr;
			width: 376px/$ppr;
			float: left;
			font-size: 20px/$ppr;
			line-height: 50px/$ppr;
			color: #494949;
			border: 1px dashed #fefad4;
			border-top: none;
			text-align: left;
			.delited_name{
				font-size: 20px/$ppr;
				width: 246px/$ppr;
				float: left;
				margin-left: 4px/$ppr;
				line-height: 50px/$ppr;
			}
			.delited_much{
				
			}
		}
		.integral_sum{
			width: 160px/$ppr;
			float: left;
			font-size: 24px/$ppr;
			line-height: 230px/$ppr;
			border-bottom: 1px dashed #fefad4;
			span{
				color: #fc4c33;
			}
		}
		.last_integral{
			border-bottom: none;
			
		}
	}
}	
</style>